<template>
	<view>
		
		<view class="content">
			<view class="top_box"><text style="text-align: center;">DDChat<br/><span>一个纯粹的社交平台</span></text></view>

			<view class="text-area">
				<view>
					<view class="flex size"><input type="email" placeholder="邮箱" v-model="usernametxt" /></view>
					<view class="flex size"><input password="true" placeholder="密码" type="digit" v-model="passwordtxt" /></view>
				</view>
			</view>
			<view class="login_flex">
				<view @click="Event_Login()" class="class_boxlogin"><text style=" font-size: 40rpx;" class=" icon iconfont icon-iconfontjiantou-copy-copy">
				登录
				</text></view>
			</view>
		</view>
		<!-- 关于 -->

		<view class="me">
			<view @tap="registerShow = true"> 邮箱注册 </view>
			<view style="width: 10%;text-align: center;">   |   </view>
			<view> 忘记密码</view>
		</view>
		
		<u-popup  :show="registerShow" :round="10" mode="bottom" :closeable="true" @close="closeRegister" @open="openRegister">
			<view style="padding: 40rpx;">
		         <u--form
		        		labelPosition="left"
		        		:model="regiserForm"
		        		:rules="rules"
		        		ref="regiserForm"
		        >
		        	<u-form-item
		        			label="邮箱"
		        			prop="userInfo.email"
		        			borderBottom
		        			ref="item1"
		        	>
		        		<u--input
		        				v-model="regiserForm.userInfo.email"
		        				border="none"
		        		></u--input>
		        	</u-form-item>
					<u-form-item
							label="昵称"
							prop="userInfo.nickname"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="regiserForm.userInfo.nickname"
								border="none"
						></u--input>
					</u-form-item>
		        	<u-form-item
		        			label="性别"
		        			prop="userInfo.gender"
		        			borderBottom
		        			@click="showSex = true; hideKeyboard()"
		        			ref="item1"
		        	>
		        		<u--input
		        				v-model="regiserForm.userInfo.gender"
		        				disabled
		        				disabledColor="#ffffff"
		        				placeholder="请选择性别"
		        				border="none"
		        		></u--input>
		        		<u-icon
		        				slot="right"
		        				name="arrow-right"
		        		></u-icon>
		        	</u-form-item>
					<u-form-item
							label="密码"
							prop="userInfo.password1"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="regiserForm.userInfo.password1"
								border="none"
								:password="true"
						></u--input>
					</u-form-item>
					<u-form-item
							label="重复密码"
							prop="userInfo.password2"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="regiserForm.userInfo.password2"
								border="none"
								:password="true"
						></u--input>
					</u-form-item>
		        </u--form>
		        <u-action-sheet
		        		:show="showSex"
		        		:actions="actions"
		        		title="请选择性别"
		        		@close="showSex = false"
		        		@select="sexSelect"
		        >
		        </u-action-sheet>
				<view class="login_flex">
					<view @click="Event_Register()" class="class_boxlogin"><text style=" font-size: 40rpx;" class=" icon iconfont icon-iconfontjiantou-copy-copy">
					提交
					</text></view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import userRequest from '@/api/user.js';
	import {mapGetters} from 'vuex';
	import $store from '@/store/index.js';
	import websocket from '@/api/websocket.js';
	import timeUtil from '@/util/timeUtil.js';
	export default {
		computed:{
			...mapGetters([''])
		},
		data() {
			return {
				usernametxt: '',
				passwordtxt: '',
				registerShow: false,
				actions: [{
					name: '男',
					},
					{
						name: '女',
					}
				],
				showSex: false,
				regiserForm:{
					userInfo:{
						email: '',
						nickname: '',
						gender: '',
						password1: '',
						password2: ''
					}
				},
				rules: {
					'userInfo.email': [
						{
							type: 'string',
							required: true,
							message: '请填写邮箱',
							trigger: ['blur', 'change']
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return uni.$u.test.email(value);
							},
							message: "请填写正确的邮箱格式",
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ["change", "blur"],
						}
					],
					'userInfo.nickname':[
						{
							type: 'string',
							required: true,
							message: '请填写昵称',
							trigger: ['blur', 'change']
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return !uni.$u.test.contains(value, " ");
							},
							message: "不允许包含空格",
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ["change", "blur"],
						}
					],
					'userInfo.gender': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					'userInfo.password1':[
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return !uni.$u.test.contains(value, " ");
							},
							message: "不允许包含空格",
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ["change", "blur"],
						},
						{
							type: 'string',
							min: 3,
							required: true,
							message: '不少于3位',
							trigger: ['blur', 'change']
						}
					],
					'userInfo.password2': {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return value===this.regiserForm.userInfo.password1;
						},
						message: "前后密码不一致",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					},
				},
			};
		},
		
		onBackPress(e) {
			// return true 表示禁止默认返回
			return true
		},
		methods: {
			hideKeyboard(){
				uni.hideKeyboard();
			},
			sexSelect(e) {
				this.regiserForm.userInfo.gender = e.name
				this.$refs.regiserForm.validateField('userInfo.gender')
			},
			openRegister(){
				
			},
			closeRegister(){
				this.registerShow = false
			},
			async loginPost(){
				console.log('开始登录')
				let res = await userRequest.login(
				{
					email: this.usernametxt,
					password: this.passwordtxt
				})
				//console.log(res)
				uni.showToast({
					title:'登录成功！',
					icon:'success'
				})
				res.data.userInfo.birthday = timeUtil.getFormatTime(Number(res.data.userInfo.birthday))
				res.data.userInfo.createTime = timeUtil.getFormatTime(Number(res.data.userInfo.createTime))
				///////登录成功的逻辑
				//console.log(res)
				$store.state.token = res.data.token;
				$store.state.loginUserInfo = res.data.userInfo;
				uni.setStorageSync('TOKEN', res.data.token);
				uni.setStorageSync('LOGIN_USER_INFO', res.data.userInfo);
				//获取好友列表
				$store.dispatch('getFriendList');
				///获取通知消息
				$store.dispatch('getNoticeList');
				//连接websocket
				websocket.initConnect();
				uni.switchTab({
					url:'/pages/index/index'
				})
				
			},
			async regsiterPost(){
			 	let res = await userRequest.register(this.regiserForm.userInfo);
				uni.showToast({
					title:'注册成功！',
					icon:'success'
				})
				this.usernametxt = this.regiserForm.userInfo.email
				this.passwordtxt = this.regiserForm.userInfo.password1
				this.$nextTick(()=>{
					this.regiserForm.userInfo = {};
					this.registerShow = false;
				})
			},
			///注册提交事件
			Event_Register(){
				let _this = this;
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.regiserForm.validate().then(res => {
					////////////提交表单的逻辑
					_this.regsiterPost();
				}).catch(errors => {
					uni.$u.toast('格式校验失败')
				})
			},
			Event_Login() {
				if (this.usernametxt && this.passwordtxt) {
					this.loginPost();
				} else {
					uni.showToast({
						title: '请输入邮箱和密码',
						icon: "none",
						duration: 3000
					});
				}


			},

		},

	}
</script>

<style lang="scss" scoped>
	.size {
		font-size: 40rpx;
	}

	.content {
		.top_box {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 70rpx;
			height: 400rpx;
			background-color: $theme-color;
			border-radius: 0 0 25% 25%;
			color: white;
		}

		.text-area {
			width: 88%;
			margin: 0 auto;
			margin-top: 20%;
			font-size: 40rpx;

			.flex {
				margin-top: 80rpx;
				display: flex;
				width: 100%;
				justify-content: space-around;
				align-items: center;
			}

			input {
				height: 120rpx;
				width: 90%;
				border-radius: 30rpx;
				font-size: 40rpx;
				text-align: center;
				background-color: #ebebeb;
			}
		}

	}

	// 补
	.login_flex {
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.class_boxlogin {
			width: 200rpx;
			height: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			background-color: $theme-green-deep;
			border-radius: 50%;
		}
	}

	.me {
		position: fixed;
		bottom: 5%;
		left: 0%;
		font-size: 28rpx;
		display: flex;
		width: 100%;

		justify-content: center;
		align-items: center;
	}
</style>
